<template>
  <view class="page-wraper background">
    <!-- <image src="https://api.cst365.top/login_bkg.png" mode="widthFix" style="width: 100%; height:auto"></image> -->
    <view class="content">
      <!-- <view class="inputview">
				<view class="username_view">
					<image src="/static/login_user.png" class="left_icon" mode=""></image>
					<input v-model="phone" placeholder="请输入手机号" placeholder-class="input_placeholder" class="input" type="number" style="-webkit-flex: 1;flex: 1;">
					<image src="/static/login_clean.png" class="right_icon" @click="clean('phone')"></image>
				</view>
			</view>
			<view class="inputview">
				<view class="password_view">
					<image src="/static/login_pwd.png" class="left_icon" mode=""></image>
					<input v-model="password"  placeholder="请输入密码" password placeholder-class="input_placeholder" class="input" type="text" style="-webkit-flex: 1;flex: 1;">
					<image src="/static/login_clean.png" class="right_icon" @click="clean('pwd')"></image>
				</view>
			</view>
			<view class="forgetpsd_view" @click="forgetPwd()">
				<text class="forget_text">忘记密码</text>
			</view>
			<view class="enter_view">
				<view class="enter_btn" @click="pwdLogin()">登录</view>
			</view>
			<view class="other_view">
				<text class="other_text" @click="verifyLogin()">验证码登录</text>
				<view class="" style="display: flex; flex:1;"></view>
				<text class="other_text" @click="register()">立即注册</text>
			</view>
			<button :disabled="!wxLoginInfo.code" open-type="getPhoneNumber" type="primary" @getphonenumber="getPhoneNumber">微信授权</button>
			 -->

      <!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权</button> -->
      <view class="logo">
        <image
          src="../../static/setting_icon.jpg"
          mode="aspectFit"
          style="width: 70px; height: 70px"
        ></image>
      </view>

      <view class="app_title"> 秒车邦 </view>
      <view class="enter_view">
        <button
          open-type="getPhoneNumber"
          class="enter_btn"
          @getphonenumber="getPhoneNumber"
        >
          微信授权
        </button>
        <!-- <button @click="getPhoneNumber()" class="enter_btn" type="primary">微信登录</button> -->
      </view>

      <view class="cancel_view">
        <view @click="cancelLogin()" class="cancel_btn">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
import customNav from "@/components/custom-nav/custom-nav.vue";

import "@/api/user.js";
import { login, wechatlogin } from "@/api/login.js";

export default {
  components: {
    customNav,
  },

  data() {
    return {
      phone: "",
      password: "",

      wxLoginInfo: {
        code: "",
        encrypted_data: "",
        iv: "",
      },
    };
  },

  onLoad() {
    uni.login({
      provider: "weixin",
      success: (res) => {
        this.wxLoginInfo.code = res.code;
      },
    });
  },

  methods: {
    cancelLogin() {
      uni.reLaunch({
        url: "/main/home/index/index",
      });
    },

    getPhoneNumber(e) {
      console.log("================");

      let iv = e.detail.iv;
      let encryptedData = e.detail.encryptedData;

      console.log("iv ================" + iv);
      console.log("encryptedData ================" + encryptedData);

      let param = {
        code: this.wxLoginInfo.code,
        encrypted_data: encryptedData,
        iv: iv,
        // "city": city
      };
      console.log("param =========" + JSON.stringify(param));
      // 微信登录
      wechatlogin(param)
        .then((res) => {
          console.log("res ==========" + JSON.stringify(res));
          if (res.code == 0) {
            uni.showToast({
              title: "登录成功",
              icon: "none",
            });
            let data = res.data;
            uni.setStorage({
              key: "login",
              data: data,
            });

            clearTimeout(this.timer); //清除延迟执行
            this.timer = setTimeout(() => {
              //设置延迟执行

              uni.reLaunch({
                url: "/main/home/index/index",
              });
            }, 1000);
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        })
        .catch((e) => {});
    },

    clean(type) {
      if (type == "phone") {
        this.phone = "";
      } else if (type == "pwd") {
        this.password = "";
      }
    },

    pwdLogin() {
      //手机号校验
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "请填写正确的手机号码",
          icon: "none",
        });
        return false;
      }

      let param = {
        state: "1", //请求方式 1：账号密码登录 2：验证码登录
        type: "2", //类型 1：注册 2：登录 3：忘记密码 4：修改密码
        source: "1", //来源 1：小程序 2：android 3：ios
        mobile: this.phone, //手机号
        password: this.password, //密码
        // "code": "8868" //验证码
      };
      login(param)
        .then((res) => {
          if (res.code == 0) {
            uni.showToast({
              title: "登录成功",
              icon: "none",
            });
            let data = res.data;
            uni.setStorage({
              key: "login",
              data: data,
            });

            clearTimeout(this.timer); //清除延迟执行
            this.timer = setTimeout(() => {
              //设置延迟执行

              uni.reLaunch({
                url: "/main/home/index/index",
              });
            }, 1000);
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        })
        .catch((e) => {});
    },

    forgetPwd() {
      uni.navigateTo({
        url: "/pages/login/forget",
      });
    },

    verifyLogin() {
      uni.navigateTo({
        url: "/pages/login/verify",
      });
    },

    register() {
      uni.navigateTo({
        url: "/pages/login/register",
      });
    },
  },
};
</script>

<style>
.content {
  margin: -20px 28px 0px 28px;
}

.logo {
  display: flex;
  justify-content: center;
  margin-top: 180px;
}

.app_title {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 26px;
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  color: #2b2b2b;
  opacity: 1;
}

.other_view {
  margin-top: 17px;
  display: flex;
  flex-direction: row;
  -webkit-align-items: center;
}

.enter_view {
  margin-top: 50px;
}

.cancel_view {
  margin-top: 10px;
}

.enter_btn {
  background: #0e59ea;
  height: 45px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  color: #ffffff;
  opacity: 1;
}

.cancel_btn {
  background-color: white;
  height: 45px;
  border-style: none;
  border-width: 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  color: #2b2b2b;
  opacity: 1;

  border: 1px solid #bebebe;
  border-radius: 7px;
}

.forgetpsd_view {
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.other_text {
  color: #898989;
  font-weight: 500px;
  text-align: right;
  font-size: 14px;
}

.forget_text {
  margin-top: 11px;
  width: 100px;
  font-size: 14px;
  color: #898989;
  font-weight: 500px;
  text-align: right;
}

.username_view {
  height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-align-items: center;
}

.password_view {
  margin-top: 10px;
  height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-align-items: center;
}

.inputview {
  width: 100%;
  height: 46px;
  border-radius: 7px;
  background-color: #f4f4f4;
}

.left_icon {
  margin-left: 15px;
  width: 18px;
  height: 20px;
}

.right_icon {
  margin-right: 15px;
  width: 18px;
  height: 18px;
}

.input {
  margin-left: 20px;
  margin-right: 20px;
}

.input_placeholder {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  opacity: 1;
}

.down_view {
  background-color: red;
  width: 100%;
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
}
</style>
